<template>
	<!-- 注意 不能再根标签使用指令 -->
	<div>
		<ul class="list">
			<li class="item" v-for="item of letters" :key='item' :ref='item' @click="handleLetterClick" @touchstart='handleTouchStart' @touchmove='handleTouchMove' @touchend='handleTouchEnd'>
				{{item}}
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'Alphabet',
		props: {
			cites: Object
		},
		computed: {
			letters() {
				const letters = [];
				for (let i in this.cites) {
					letters.push(i);
				}
				return letters;
			}
		},
		data() {
			return {
				touchstatus: false,
				startY: 0,
				timer: null
			}
		},
		updated() {
			// 优化一:通过生命周期函数updated让组件在数据发生变化渲染时,就获取第一个字母到顶端的距离
			this.startY = this.$refs['A'][0].offsetTop;
		},
		methods: {
			/* 实现点击字母跳转到对应的首字母开头的城市列表区域 
				通过兄弟组件的通信实现
					具体实现:
					父组件city监听该子组件的数据,获取到该组件的数据,然后在传递给另一个子组件即可
			*/
			handleLetterClick(e) {
				this.$emit('change', e.target.innerText);
				console.log(e.target.innerText);
			},
			/* 实现在字母导航滑动时，列表显示区域也会跟着改变  */
			// 重点
			handleTouchStart() {
				this.touchstatus = true;
			},
			handleTouchMove(e) {
				// 低性能版 基础版
				if (this.touchstatus) {
					/* 获取a距离顶端的距离 */
					// const startY = this.$refs['A'][0].offsetTop;
					// 优化2:通过数据节流,来使得该函数调用次数降低 实现：通过定时器和定时函数来实现
					if (this.timer != null) {
						/* 当timer存在时先清空 上一次的操作*/
						clearTimeout(this.timer);
					}
					/* 进行这一次的操作 */
					this.timer = setTimeout(() => {
						/* 鼠标位置距离顶端的距离 */
						// touches: 当前屏幕上所有触摸点的列表;
						const touchY = e.touches[0].clientY - 79;
						/* 
							当前鼠标位置在哪一个字母上=(鼠标距离顶端的位置 - 第一个字母距离顶端的距离)/每个字母的高度
						 */
						const index = Math.floor((touchY - this.startY) / 20);
						if (index >= 0 && index < this.letters.length) {
							this.$emit('change', this.letters[index]);
						}
					}, 16)
				}
			},
			handleTouchEnd() {
				this.touchstatus = false;
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	@import '~styles/varibles.less';
	.list {
		/* 垂直居中 */
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* 定位到右边 */
		position: absolute;
		right: 0;
		top: 1.58rem;
		bottom: 0;
		width: 0.4rem;
		.item {
			text-align: center;
			line-height: 0.4rem;
			color: @bgcolor;
		}
	}
</style>
